<template>
  <div class="about">
   <div style="width:20vw" ref="a_right"  class="a_right"></div>
  <div style="width:auto;padding-left:2vw;" ref="a_left" class="a_left">
    <div class="a_left_top">
        <life-count-down></life-count-down>
     </div>
   <div class="a_left_main">
     <div @click="Torelease" class="mid">
       <span class="iconfont">&#xe603;</span><span>{{text}}</span>
     </div>
   </div>
  </div>
  </div>
</template>
<script>
import { mapState,mapMutations } from "vuex";
import lifeCountDown from "components/lifecountdown/lifecountdown.vue"
export default {
  name: "resource_release",
  data() {
    return {
      text:'去发布'
    };
  },
  watch: {
    lateralNavanimate(newValue, oldValue) {
    this.$refs.a_right.style.width = newValue+'vw';
    // this.$refs.a_left.style.width = (newValue+78.5)+'vw';
    },
    padding_left(newV,oldV){
      this.$refs.a_left.style.paddingLeft = newV+'vw';
      if(newV==2){
         this.$refs.a_left.style.paddingLeft = '7vw'
      }
      console.log("newV:",newV)
    }
  },
   methods: {
    ...mapMutations(['changenavIndex']),
    // 去发布
    Torelease(){
      this.$router.push('/write')
      if(this.text=='去发布'){
        this.text='继续发布'
      }
    }
  },
  computed: {
    ...mapState({
      lateralNavanimate: (state) => state.lateralNavanimate,
      padding_left: (state) => state.padding_left
    }),
  },
  mounted() {
    // this.$refs.a_left.style.paddingLeft = this.padding_left+'vw'
    // this.changenavIndex(3);
      // this.changenavIndex(3);
  
  },
  activated() {
    this.$refs.a_left.style.paddingLeft = this.padding_left+'vw'
    if(this.padding_left==2){
    this.$refs.a_right.style.width = (22-this.padding_left)+'vw'
    }
    this.changenavIndex(3);
  },
  components: {
    lifeCountDown
  },
};
</script>
<style lang="less">
.about {
  display: flex;
  width: 100vw;
  .a_right{
    box-sizing: border-box;
  }
  .a_left{
    box-sizing: border-box;
    background-color: skyblue;
    height: 90vh;
    padding-left: 8vw;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .a_left_top{
      position: absolute;
    }
    .a_left_main{
      position: relative;
      .mid{
        background-color: #13aa52;
        border-radius: 10px;
        padding: 10px 15px;
        cursor: pointer;
        span{
          color: #fff;
          font-size: 0.8rem;
        }
        span:nth-child(1){
          margin-right: 5px;
        }
      }
      .mid:hover{
        background-color: #ffc61d;
        span{
          color: #333;
        }
      }
    }
  }
}
</style>

